<template>
  <section class="component case-record-chart">
    <common-title title="流出案件">
      <el-select slot="append" v-model="model.overduePeriod" placeholder="请选择" clearable @change="updateData">
        <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code"></el-option>
      </el-select>
    </common-title>

    <ve-pie height="450px" legend-position="bottom" :data="caseRecordChart.data" :settings="caseRecordChart.setting" :legend="caseRecordChart.legend"></ve-pie>

  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { VePie } from "v-charts";
import { HomePageService } from '~/services/domain-service/home-page.service';

@Component({
  components: {
    VePie
  }
})
export default class CaseRecordChart extends Vue {
  @Dependencies(HomePageService)
  private homePageService: HomePageService

  private model: any = {
    overduePeriod: 'N0'
  }

  private get initDataRows() {
    const followupBack: any = this.$dict.getDictData('FollowupBack')
    return followupBack.map(v => {
      return {
        actionName: v.name,
        actionCode: v.code,
        codeNum: 0
      }
    })
  }

  private caseRecordChart = {
    data: {
      columns: ['actionName', 'codeNum'],
      rows: this.initDataRows
    },
    setting: {
      labelMap: {
        actionName: '行动代码名称',
        actionCode: '行动代码',
        codeNum: '代码数量',
      },
      labelLine: {
        show: false
      },
      label: {
        position: 'inside',
        formatter: '{b}: {d}%'
      },
      radius: 130
    },
    legend: {
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10,
      y: 'bottom',
      x: 'center'
    }
  };

  private updateData() { }

  private mounted() {
    this.updateData()
  }
}
</script>

<style lang="less" scoped>
</style>
